import {Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges} from '@angular/core';

@Component({
    selector: 'app-stars',
    templateUrl: './stars.component.html',
    styleUrls: ['./stars.component.css']
})
export class StarsComponent implements OnInit,OnChanges {

    @Input()
    rating: number = 0;

    @Output()
    ratingChange:EventEmitter<number> = new EventEmitter();

    stars: boolean[];

    @Input()
    readonly: boolean = true;

    constructor() {
    }

    // 输入属性在发生变化的时候调用.
    ngOnChanges(changes:SimpleChanges):void{
        this.stars = [];
        for (let i = 1; i < 5; i++) {
            this.stars.push(i > this.rating);
        }
    }

    ngOnInit() {

    }

    clickStar(index: number) {
        if (!this.readonly) {
            this.rating = index + 1;
            this.ratingChange.emit(this.rating);
        }
    }

}
